<template>
  <div class="table-container">
    <el-form :model="form" label-width="120px" ref="form" label-position="left">
      <el-form-item label="姓名" required>
        <el-input v-model="form.name" />
      </el-form-item>
      <!-- 年龄 -->
      <el-form-item label="年龄" required>
        <el-input-number :min="0" :controls="false" v-model="form.age" class="align-left" />
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别" required>
        <el-select v-model="form.gender" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- 角色 -->
      <el-form-item label="分类" required>
        <el-select v-model="form.categoryId" placeholder="请选择分类">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- 描述 -->
      <el-form-item label="介绍" required>
        <el-input v-model="form.description" />
      </el-form-item>
      <!-- 头像 -->
      <el-form-item label="封面图片" required>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :limit="1"
          :before-upload="beforeUpload1"
        >
          <img v-if="form.coverImage" :src="form.coverImage" class="avatar" />
          <i v-else class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <!-- 解锁条件 -->
      <el-form-item label="解锁条件" required>
        <el-select v-model="form.unlockCondition" placeholder="请选择解锁条件">
          <el-option label="1" value="金币"></el-option>
          <el-option label="2" value="亲密度"></el-option>
        </el-select>
      </el-form-item>
      <!-- 解锁值 -->
      <el-form-item label="解锁值" required>
        <el-input-number
          :min="0"
          :controls="false"
          v-model="form.unlockValue"
        />
      </el-form-item>
      <!-- 聊天金币消耗 -->
      <el-form-item label="聊天消耗金币" required>
        <el-input-number
          :min="0"
          :controls="false"
          v-model="form.chatGoldCost"
        />
      </el-form-item>
      <!-- 人物相册 -->
      <el-form-item label="相册" required>
        <div class="album-container">
            <div class="album-list" v-for="(item,index) in form.photos" :key="index">
              <img class="album-item" :src="item.imageUrl" @click="handlePictureCardPreview(item)"/>
              <el-form-item label="宽度" required>
                <el-input-number
                    :min="0"
                    :controls="false"
                    v-model="item.width"
                />
              </el-form-item>
              <el-form-item label="高度" required>
                <el-input-number
                    :min="0"
                    :controls="false"
                    v-model="item.height"
                />
              </el-form-item>
              <i class="el-icon-delete album-delete" @click="handleDelete(index)"></i>
            </div>
        </div>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="toCancel">取消</el-button>
      <el-button type="primary" v-if="form.id" @click="update">修改</el-button>
      <el-button type="primary" v-else @click="handleAdd">新增</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="80%">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
  
  <script>
import { characterAdd, characterDetail, characterUpdate } from "@/api/ai";
import request from "@/utils/request";
export default {
  name: "Table",
  data() {
    return {
        form: {
            // coverImage: "https://img.tanjiu.cn/home/7MzykxBHrNXF26KpRyMRd7XaxGsr48YC.png",
            // photos: [{
            //     imageUrl: "https://img.tanjiu.cn/home/7MzykxBHrNXF26KpRyMRd7XaxGsr48YC.png",
            //     width: 100,
            //     height: 100,    
            //     unlockCondition: 1,
            //     unlockValue: 100,
            // }]
      },
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
    mounted() {
      if (this.$route.query.id) {
        this.getDetail()
      }
  },
    methods: {
      getDetail() {
        characterDetail({
          id: this.$route.query.id
        }).then((res) => {
         let photos = res.data.photo.map(item => {
            return {
                imageUrl: item.image_url,
                width: item.width,
                height: item.height,
                unlockCondition: item.unlock_condition,
                unlockValue: item.unlock_value,
              }
         })
          this.form = Object.assign({}, res.data, {photos})

          })
      },
      update() {
        characterUpdate(this.form).then((res) => {
            this.$message.success("修改成功");
            this.toCancel();
        });
      },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
      handlePictureCardPreview(item) {
      this.dialogImageUrl = item.imageUrl;
      this.dialogVisible = true;
      },
      beforeUpload1(file) {
      const fmData = new FormData();
      fmData.append("file", file);
      request({
        url: "/admin/common/upload",
        method: "post",
        data: fmData,
      }).then((res) => {
        this.form.coverImage = res.data.url;
      });
      return false;
    },
    beforeUpload(file) {
      const fmData = new FormData();
      fmData.append("file", file);
      request({
        url: "/adminadmin/common/upload",
        method: "post",
        data: fmData,
      }).then((res) => {
        this.form.photos.push({
            imageUrl: res.data.url,
            width: 100,
            height: 100,
            unlockCondition: 1,
            unlockValue: 100,
        });
      });
      return false;
      },
      handleDelete(index) {
        this.form.photos = this.form.photos.filter((item, index) => index !== index)
        console.log(this.form)
      },
    handleAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
            characterAdd(this.form).then((res) => {
                console.log(res);
                if(res.code === 0) {
                    this.$message.success("添加成功");
                    this.toCancel();
                }
            });
        }
      });
    },
      toCancel() {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.push("/table");
      },
    // 离开页面
    beforeDestroy() {
        this.$store.dispatch('tagsView/delView', this.$route)
    },
  },
};
</script>
  <style lang="scss" scoped>
.table-container {
  padding: 20px;
  .mr20 {
    margin-right: 20px;
  }
  .search-container {
    & > * {
      margin-bottom: 10px;
    }
  }
}
.dialog-footer {
  text-align: center;
}
.album-container {
    .album-list {
        width: 178px;
        height: 178px;
        margin-right: 10px;
        position: relative;
        .album-item {
            width: 100%;
            height: 100%;
        }
        .album-delete {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #000;
            cursor: pointer;
        }
    }
}
.avatar-uploader .el-upload {
  border: 1px dashed #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon-plus {
  border: 1px dashed #000;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
  